import React, { useState } from 'react'
import { NavBar, Popup, PopupPosition, Button, Form, Input, Cell, Area } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { areaList } from '@vant/area-data'
// 引入地址相关的接口
import { address1 } from '@/api/address'
type Props = {}

export default function Address({ }: Props) {
  const navigate = useNavigate()
  const [show1, setShow1] = useState<PopupPosition>('') //第一个遮罩层，填内容
  const [show2, setShow2] = useState<PopupPosition>('') //第二个遮罩层，省市区选择
  const onClose1 = () => setShow1('')//关闭第一个
  const onClose2 = () => setShow2('')//关闭第二个
  const [form] = Form.useForm()
  // 省市区确认选择
  const onConfirm = ((val: any) => {
    console.log(val);  // val输出的是 ['360000', '360700', '360731']


  })
  // 点击保存 ,添加地址
  const onFinish = (values: any) => {
    console.log(values)  //{name: 'xieting',tel: '17890905656', addressDetail: 'xxx花园'}
    // const addressObj = {
    //   userid: localStorage.getItem('userid'),
    //   name: values.name,
    //   tel: values.tel,
    //   province: item.province,
    //   city: item.city,
    //   county: item.county,
    //   addressDetail: values.addressDetail,
    //   isDefault: item.isDefault,
    // }
    // address1(addressObj).then((res) => {

    // })
  }

  return (
    <div>地址页
      <NavBar
        title="地址"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />

      {/* 按钮 nativeType='submit' */}
      <Button round type='danger' block style={{ position: 'fixed', bottom: '6px', width: '100%' }} onClick={() => setShow1('bottom')}>
        新增地址
      </Button>

      {/* 填内容 */}
      <Popup visible={show1 === 'bottom'}
        style={{ height: '80%' }}
        position='bottom'
        onClose={onClose1}>
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '10px 10px' }}>
              <Button round nativeType='submit' type='danger' block >
                保存
              </Button>
              <Button round nativeType='submit' type='default' block style={{ margin: '4px 4px ' }} >
                删除
              </Button>
            </div>
          }
        >
          <Form.Item
            name='name'
            label='姓名'
          >
            <Input placeholder='姓名' />
          </Form.Item>
          <Form.Item
            name='tel'
            label='电话'
          >
            <Input placeholder='电话' />
          </Form.Item>
          <Cell title='地区' isLink value='地区' onClick={() => { setShow2('bottom') }} >
            <Input></Input>
          </Cell>
          {/* 省市区 */}
          <Popup visible={show2 === 'bottom'}
            style={{ height: '60%' }}
            position='bottom' onClose={onClose2} >
            <Area areaList={areaList} onConfirm={onConfirm} />
          </Popup>

          <Form.Item
            name='addressDetail'
            label='详细地址'
          >
            <Input placeholder='详细地址' />
          </Form.Item>
        </Form>
      </Popup>



    </div>
  )
}